<!-- 数据源管理 -->
<template>
  <div>
    <div class="children_content">
      <div class="add_btns_box">
        <div class="box_left">
          <div class="go-back" @click="emit('back')">
            <Icon type="md-arrow-round-back" size="20" />
            返回
          </div>
          <div class="title">{{props.currentMetaData.name}} ({{ tableData.length }})</div>
        </div>
        <div class="box_right">
          <Space v-if="tabActive === '1'">
            <Button type="primary" @click="handleBatchEdit">批量修改</Button>
            <Button type="error" @click="handleBatdelete()">批量删除</Button>
            <Button type="primary" @click="handleSync">同步结构</Button>
          </Space>
        </div>
      </div>

      <Tabs v-model="tabActive">
        <TabPane v-for="item in TAB_OPTIONS" :key="item.value" :label="item.label"
          :name="item.value" />
      </Tabs>

      <div class="content_table">
        <StructureTemplate v-if="tabActive === '1'" ref="structureTemplateRef" :tableHeight="tableHeight"
          :currentMetaData="currentMetaData" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, inject, watch } from 'vue'

import StructureTemplate from './components/StructureTemplate/index.vue'

// 屏幕高度
const screenHeight = inject('screenHeight')
// 表格高度
const tableHeight = ref(0)
// 监听 screenHeight 的变化
watch(
  screenHeight,
  newHeight => {
    tableHeight.value = newHeight - 225
  },
  { immediate: true }
)

const props = defineProps({
  currentMetaData: {
    type: Object
  }
})

const emit = defineEmits('back')

const TAB_OPTIONS = [
  { label: '数据结构', value: '1', requestName: 'tableProperties' },
  // { label: '表数据', value: '2', requestName: 'tableData' }
]

const tabActive = ref(TAB_OPTIONS[0].value)
const structureTemplateRef = ref(null)

const pageIndex = ref(1)
const pageSize = ref(20)

// 列表数据
const tableData = ref([])

const handleBatchEdit = () => {
  structureTemplateRef.value.handleBatchEdit()
}

const handleSync = () => {
  structureTemplateRef.value.handleSync()
}

// 处理页码变化
const handlePageChange = page => {
  pageIndex.value = page
  getPageData()
}

const handleBatdelete = () => {
  structureTemplateRef.value.handleBatdelete()
}
</script>

<style lang="scss" scoped>
.box_left {
  display: flex;
  align-items: center;
  .go-back {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    margin-right: 16px;
    cursor: pointer;
    &:hover {
      opacity: 0.9;
    }
  }
}

:deep(.ivu-tabs) .ivu-tabs-bar {
  margin-bottom: 0;
}

.add_btns_box{
  height: 52px;
}
</style>